<style lang="scss" scoped>
    .c-wrap{
        position: absolute;
        width: 100%; height: 100%;
        z-index: 100;
        left: 0; top: 0;
    }

    .c-master{
        position: absolute;
        width: 100%; height: 100%;
        background:rgba(48,54,65, .5);
    }

    .c-content{
        position: absolute;
        width: 750px;
        background: #fff;
        left: 50%; top: 150px;
        transform: translateX(-50%);
    }

    .c-title{
        height: 80px;
        line-height: 80px;
        background:rgba(242,242,242,1);
        text-align: center;
        color:rgba(136,136,136,1);
        font-size: 16px;
    }

    .c-item{
        height: 50px;
        background: #fff;
        line-height: 50px;
        font-size: 14px;
        text-align: center;
        cursor: pointer;
        border-bottom: 1px solid rgba(229,229,229,1);
    }

    .c-item:last-child(1){
        border-bottom: none;
    }

    .color-000{
        color: #000;
    }
</style>

<template>
    <div class="c-wrap">
        <div class="c-master"></div>
        <div class="c-content">
            <div class="c-title">{{title}}</div>
            <div class="c-item" @click="callback" :style="{color: btnColor}">{{btnText}}</div>
            <div class="c-item color-000" @click="cancel">取消</div>
        </div>
    </div>
</template>


<script>
    export default {
        data () {
            return {
                title: '',
                btnColor: 'rgba(48,54,65,1)',
                btnText: '加入黑名单'
            }
        },
        methods: {
            cancel () {
                document.body.removeChild(this.$el)
                this.$destroy()
            },
            callback () {
                if (typeof this.success == 'function') {
                    this.success()
                }
            }
        }
    }
</script>